<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Css3的动画效果</title>
	<!-- 让ie浏览器采用最新的渲染模式 -->
	<meta http-equiv="X-UA-compatible" content="IE=edge">
	<!-- 让页面宽度强制去适应你的设备宽度且初始化的缩放比例为1（移动端页面常用到） -->
	<meta name="viewport" content="width=device-width" initial-scale="1">
	<link rel="stylesheet" href="style/css.css">
	<link rel="stylesheet" type="text/css" href="style/font-awesome.min.css">
</head>
<body>
	<div class="container">
		<ul>
			<li class="nav-li">
				<a href="##" class="affect-tip1 tip">Home
					<span><i class="fa fa-home fa-fw"></i></span>
				</a>
			</li> 
			<li class="nav-li">
				<a href="##" class="affect-tip2 tip">About me
					<span><i class="fa fa-user fa-fw"></i></span>
				</a>
			</li> 
			<li class="nav-li">
				<a href="##" class="affect-tip3 tip">Photography
					<span><i class="fa fa-fw fa-camera-retro"></i></span>
				</a>
			</li> 
			<li class="nav-li">
				<a href="##" class="affect-tip4 tip">Work
					<span><i class="fa fa-fw fa-camera-retro"></i></span>
				</a>
			</li> 
			<li class="nav-li">
				<a href="##" class="affect-tip5 tip">Contact
					<span><i class="fa fa-fw fa-envelope"></i></span>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>